<script setup lang="ts">
import { addLight, getLightList, getResidentialList, replaceLightById } from "@/api/property";
import { ref } from "vue";
import { ElNotification } from "element-plus";

defineOptions({
  name: "lightList"
});
const residentialList = ref([]);
const residential = ref(null);//小区ID
const dataList = ref([]);
const changeDialog = ref(false);
const changeLightId = ref();
const addLightDialog = ref(false);
const lightInfo = ref();
const form = ref({});

//初始化数据
async function onSearch() {
  //获取小区列表
  getResidentialList().then(res => {
    residentialList.value = res.data.records;
  });
  loading.value = false;
}

const getLight = () => {
  getLightList(residential.value).then(res => {
    dataList.value = res.data;
  });
};
//替换灯具
const replaceLight = (data?: any) => {
  replaceLightById(data).then(res => {
    if (res.code === 200)
      ElNotification({
        title: "Success",
        message: res.msg,
        type: "success"
      });
    else
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error"
      });
    getLight();
  });

};
//删除灯具
const deleteLight = (data?: any) => {

};
const AddLight = () => {
  addLight(form.value).then(res => {
    if (res.code === 200)
      ElNotification({
        title: "Success",
        message: res.msg,
        type: "success"
      });
    else
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error"
      });
    getLight();
  });
};
const ChangeLight = () => {
  form.id = changeLightId;
  addLight(form.value).then(res => {
    if (res.code === 200)
      ElNotification({
        title: "Success",
        message: res.msg,
        type: "success"
      });
    else
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error"
      });
    getLight();
  });
};
onSearch();
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item>
        <el-button
          type="primary"
          @click="addLightDialog=true"
        >添加灯具
        </el-button>
      </el-form-item>
      <el-form-item label="归属小区">
        <el-radio-group
          v-model="residential"
          size="small"
          @change="getLight();form.residentialId=residential"
        >
          <el-radio-button
            v-for="list in residentialList"
            :label="list.id"
            :value="list.id"
          >{{ list.name }}
          </el-radio-button
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table :data="dataList.records" table-layout="fixed">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="address" label="安装地址" />
      <el-table-column prop="lampType" label="灯具类型" />
      <el-table-column prop="power" label="功率" />
      <el-table-column prop="openTime" label="开灯时间" />
      <el-table-column prop="closeTime" label="关灯时间" />
      <el-table-column prop="damageTime" label="损坏时间" />
      <el-table-column prop="replaceId" label="替换灯具" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            type="primary"
            size="small"
            v-if="scope.row.replaceId===null"
            @click="replaceLight(scope.row.id)"
          >更换
          </el-button>
          <el-button
            type="danger"
            size="small"
            v-if="scope.row.replaceId===null"
            @click="changeDialog=true;changeLightId=scope.row.id;form = scope.row"
          >修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            v-if="scope.row.replaceId!=null"
            @click="deleteLight(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%">
      <el-pagination
        style="float: right"
        background
        layout="prev, pager, next"
        :total="dataList.total"
        :page-count="dataList.current"
      />
    </div>
    <div>
      <!--      使用Dialog弹窗添加灯具-->
      <el-dialog v-model="addLightDialog" title="添加灯具" width="500" center>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="安装地址">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="灯具类型">
            <el-radio-group v-model="form.lampType" class="ml-4">
              <el-radio value="交流LED" label="交流LED" size="small">交流LED</el-radio>
              <el-radio value="直流LED" label="直流LED" size="small">直流LED</el-radio>
              <el-radio value="太阳能LED" label="太阳能LED" size="small">太阳能LED</el-radio>
              <el-radio value="风能LED" label="风能LED" size="small">风能LED</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功率">
            <el-input v-model="form.power" />
          </el-form-item>
          <el-form-item label="开灯时间">
            <el-time-picker v-model="form.openTime" value-format="HH:MM:ss" />
          </el-form-item>
          <el-form-item label="关灯时间">
            <el-time-picker v-model="form.closeTime" value-format="HH:MM:ss" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addLightDialog = false">取消</el-button>
            <el-button type="primary" @click="AddLight();addLightDialog = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--      使用Dialog弹窗修改灯具-->
      <el-dialog v-model="changeDialog" title="修改灯具" width="500" center>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="安装地址">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="灯具类型">
            <el-radio-group v-model="form.lampType" class="ml-4">
              <el-radio value="交流LED" label="交流LED" size="small">交流LED</el-radio>
              <el-radio value="直流LED" label="直流LED" size="small">直流LED</el-radio>
              <el-radio value="太阳能LED" label="太阳能LED" size="small">太阳能LED</el-radio>
              <el-radio value="风能LED" label="风能LED" size="small">风能LED</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功率">
            <el-input v-model="form.power" />
          </el-form-item>
          <el-form-item label="开灯时间">
            <el-time-picker v-model="form.openTime" value-format="HH:MM:ss" />
          </el-form-item>
          <el-form-item label="关灯时间">
            <el-time-picker v-model="form.closeTime" value-format="HH:MM:ss" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="changeDialog = false">取消</el-button>
            <el-button type="primary" @click="ChangeLight();changeDialog = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--  使用Dialog弹窗进行出租-->
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
